<template>
	<view class="page">
		<scrollYBox styleText="height: calc( 100vh - 450rpx ) ;" @scrolltolower="scrolltolower" :list="selectMealArr">
				<template>
						<view style="padding-bottom: 50rpx;padding-top: 20rpx;">
							<view class="boxItem" v-for="(item,index) in selectMealArr" :key="index" @click="handleSelectItem(index)">
								<view class="row flex">
									<view class="item ">
										<u-radio-group v-model="item.checked">
											<u-radio :name="true" :label="item.mealName"></u-radio>
										</u-radio-group>
									</view>
									
								</view>
								<view class="row flex">
									<view class="item ">
										<view class="label">
											{{'金额：'}}
										</view>
										<view class="val">
											<text class="moneyText red">￥{{item.money}}</text>
										</view>
									</view>
									<view class="item ">
										<view class="label">
											{{'份数：'}}
										</view>
										<view class="val">
											<text class="">{{item.copies==0? '不限' : item.stock}}</text>
										</view>
									</view>
								</view>
								<view class="row flex">
									<view class="item ">
										<view class="label">
											{{'有效时间：'}}
										</view>
										<view class="val">
											{{item.beginDate}} 至 {{item.endDate}}
										</view>
									</view>
								</view>
							</view>
						</view>
				</template>
		</scrollYBox>
		<view class="row rowTotal">
			<view class="label">
				{{'合计'}}:
			</view>
			<view class="text red" style="font-weight: 600;font-size: 46rpx;margin-left: 30rpx;">
				{{totalMoney}}
			</view>
		</view>
		
		<view class="textTitle">
			{{language.topup.label4}}
		</view>
		<view class="payType">
			<u-icon name="weixin-fill" color="#10d269" size="30"></u-icon>
			<text>
				{{language.topup.label5}}
			</text>
			<u-icon name="checkmark" color="#2979ff" size="28"></u-icon>
		</view>
		<view class="btn" @click="handlePay">
			<text>{{'购买'}}</text>
		</view>
		
	</view>
</template>

<script>
	import {csMealsProductListApi,paymentMealsApi} from '@/common/api/commonApi/bookingMeal.js'
	export default {
		data() {
			return {
				selectMealArr:[
					// {
					// 	checked: true,
					// 	label : '早餐',
					// 	tip: '选交',
					// 	num: '不限',
					// 	money: 150
					// },
				],
				selectProductId : [],
				selectInfoAccount : uni.getStorageSync('selectInfoAccount'),
			}
		},
		computed: {
			totalMoney(){
				let num = 0
				let selectProductId = []
				this.selectMealArr.forEach(item=>{
					if(item.checked){
						num+=item.money
						selectProductId.push(item.id)
					} 
				})
				this.selectProductId = selectProductId
				return num
			}
		},
		methods: {
			handleSelectItem(index){
				console.log(this.selectMealArr[index]);
				let item = this.selectMealArr[index]
				item.checked = !item.checked
				this.$set(this.selectMealArr,index,item)
			},
			getMealList(){
				// let minDate =  this.dateformat( new Date()).slice(' ')
				// console.log( minDate.slice(' ')[0]);
				// return
				return csMealsProductListApi({
					status : 1,
					minDate : this.dateformat( new Date()).split(' ')[0]
				}).then(res=>{
					this.selectMealArr = []
					res.result.records.forEach(item=>{
						item.checked = false
					})
					this.selectMealArr = res.result.records
				})
			},
			scrolltolower(){
				
			},
			handlePay(){
				if(!this.totalMoney) return this.setMessage('请先选择购买餐段')
				let data = {
					// amount : this.totalMoney,
					 productId : this.selectProductId
				}
				// // #ifdef MP-WEIXIN
				// 	data.tradeType = 'JSAPI'
				// // #endif
				// // #ifdef H5
				// 	data.tradeType = 'MWEB'
				// // #endif
				
				paymentMealsApi(data).then(res=>{
					// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay',
							nonceStr :  res.result.nonce_str,
							package : `prepay_id=${res.result.prepay_id}`,
							paySign : res.result.sign,
							signType : 'MD5',
							timeStamp: String(res.result.timeStamp),
							success:() =>{
								this.getCountMoney().then(res=>{
									this.setMessage('支付成功')
								})
							},
							fail: (err) => {
								console.log(err);
								this.setMessage('支付取消或失败')
							}
						})
					// #endif
					// #ifdef H5
						let renderUrl = res.result.mweb_url
						window.location.href= renderUrl
					// #endif
				
				})
			}
		},
		onLoad() {
			this.getMealList()
		},
		onShow() {
			
		},
	}
</script>

<style lang="scss" scoped>
.page{
	height: 100vh;
	// background-color: #fff;
	// padding-bottom: 50rpx;
	.text{
		color: #333;
	}
	.row{
		display: flex;
		align-items: center;
		height: 90rpx;
		border-bottom: 2rpx solid #f1f1f1;
		padding-left: 30rpx;
		.label{
			// margin: 0 20rpx;
		}
	
	}
	.red{
		color: #fe415c;
	}
	.money{
		height: 100rpx;
		@include flexCenter;
		font-size: 36rpx;
		border-bottom: 2rpx solid #f1f1f1;
		text{
			font-size: 28rpx;
			color: #333;
			margin-left: 5rpx;
		}
	}
	.textTitle{
		padding-top: 40rpx;
		font-size: 30rpx;
		padding-left: 50rpx;
		color: #000;
		background: #fff;
	}
	.payType{
		display: flex;
		align-items: center;
		height: 110rpx;
		padding: 0 50rpx;
		width: 100%;
		background: #fff;
		image{
			width: 50rpx;
			height: 60rpx;
		}
		text{
			color: #000;
			flex: 1;
			padding-left: 20rpx;
			white-space: nowrap;
			font-size: 30rpx;
		}
	}
	.btn{
		margin: 20rpx auto 0;
		background: #2d8cf6;
		@include flexCenter;
		width: 90vw;
		height: 92rpx;
		border-radius: 10rpx;
		text{
			color: #fff;
		}
	}
	
	.selectBox{
		min-height: 700rpx;
		padding-top: 30rpx;
		.selectItem{
			background-color: #fff;
			margin: 0 30rpx 30rpx;
			border-radius: 8rpx;
			padding: 10rpx;
			box-shadow: 0px 0px 20rpx 0px rgba(102,102,102,0.35);
			padding: 20rpx;
			.selectRow{
				display: flex;
				margin-top: 20rpx;
				text{
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.moneyText{
					flex: 1;
					font-size: 38rpx;
				}
			}
			
		}
	}
}

.boxItem{
			background-color: #fff;
			margin: 0 20rpx 20rpx;
			border-radius: 8rpx;
			padding: 10rpx;
			box-shadow: 0px 0px 20rpx 0px rgba(102,102,102,0.15);
			.row{
				margin: 10rpx;
				display: flex;
				.item{
					// padding-left: 10rpx;
					// width: 50%;
					flex: 1;
					display: flex;
					align-items: center;
				}
				.label{
					color: #969696;
					white-space: nowrap;
				}
				.val{
					color: #353535;
					font-size: 32rpx;
				}
				.btn{
						padding: 0 30rpx;
						// width: 120rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #1890ff;
						border-radius: 8rpx;
						color: #fff;
						margin-right: 10rpx;
				}
			}
		}
		
	.rowTotal{
		border-top: 2rpx solid rgba(102,102,102,0.15);
		background: #fff;
		// box-shadow: 0px 0px 20rpx 0px rgba(102,102,102,0.15);
	}
</style>
